<script setup>
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/index.js";
import {message} from "ant-design-vue";

defineOptions({name: "Login"});
const router = useRouter();
const userStore = useUserStore();
const formRef = ref();
const pageData = ref({
  loading: false,
  remember: false,
  labelCol: {span: 6},
  wrapperCol: {span: 24},
  formState: {
    username: "",
    password: "",
  },
  formRules: {
    username: [{required: true, message: "请输入账户", trigger: "blur"}],
    password: [{required: true, message: "请输入密码", trigger: "blur"}],
  },
});
const method = reactive({
  submit: () => {
    formRef.value.validate().then(async () => {
      pageData.value.loading = true;
      const code = await userStore.accountLogin(pageData.value.formState);
      if (code === 200) {
        await router.push("/");
      }
      pageData.value.loading = false;
    });
  },
});
</script>

<template>
  <div id="login">
    <div class="login-form">
      <a-form ref="formRef" :model="pageData.formState" :rules="pageData.formRules"
              :label-col="pageData.labelCol"
              :wrapper-col="pageData.wrapperCol">
        <a-form-item>
          <img class="logo" src="/favicon.svg" alt=""/>
          <div class="head">Book Admin</div>
          <div class="desc">图 书 系 统 最 具 影 响 力 的 设 计 规 范 之 一</div>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="请输入账号" v-model:value="pageData.formState.username"/>
        </a-form-item>
        <a-form-item>
          <a-input
              placeholder="请输入密码"
              v-model:value="pageData.formState.password"
              type="password"
              autocomplete="off"
              @keyup.enter="method.submit"
          />
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="pageData.remember">记住我</a-checkbox>
          <a class="forgot" href="" @click.prevent="router.push('/register')"> 前往注册 </a>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button :loading="pageData.loading" type="primary" @click="method.submit">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="less">
#login {
  width: 100%;
  height: 100%;
  background: url('@/assets/img/login/background.svg');
  background-size: cover;

  .login-form {
    padding-top: 150px;
    margin: auto;
    width: 340px;
    min-height: 20px;

    .ant-btn {
      width: 100%;
    }
  }

  .logo {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 20px !important;
    width: 60px !important;
    border: none;
    background-color: transparent;
  }

  .head {
    position: absolute !important;
    margin-top: 10px !important;
    margin-left: 20px !important;
    width: 300px;
    height: 60px !important;
    line-height: 60px !important;
    color: #36b368;
    font-size: 30px !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }

  .desc {
    width: 100% !important;
    height: 60px !important;
    line-height: 60px !important;
    color: gray !important;
    text-align: center !important;
  }

  .forgot {
    float: right;
  }
}
</style>